<template>
    <view class="container">
        <view class="list-cell b-b" @click="navTo('/pages/address/address')" hover-class="cell-hover"
              :hover-stay-time="50">
            <text class="cell-tit">收货地址</text>
            <text class="cell-more yticon icon-you"></text>
        </view>
        <view class="list-cell log-out-btn" @click="toLogout">
            <text class="cell-tit">退出登录</text>
        </view>
    </view>
</template>

<script>
  import {
    mapState,
    mapMutations,
  } from 'vuex'

  export default {
    data () {
      return {}
    },
    computed: {
      ...mapState(['hasLogin', 'userInfo'])
    },
    methods: {
      ...mapMutations(['logout']),
      /**
       * 统一跳转接口,拦截未登录路由
       * navigator标签现在默认没有转场动画，所以用view
       */
      navTo (url) {
        if (!this.hasLogin) {
          url = '/pages/public/login'
        }
        uni.navigateTo({
          url,
        })
      },
      //退出登录
      toLogout () {
        uni.showModal({
          content: '确定要退出登录么',
          success: (e) => {
            if (e.confirm) {
              this.logout()
              setTimeout(() => {
                uni.navigateBack()
              }, 200)
            }
          },
        })
      },
      //switch
      switchChange (e) {
        let statusTip = e.detail.value ? '打开' : '关闭'
        this.$api.msg(`${statusTip}消息推送`)
      },

    },
  }
</script>

<style lang='scss'>
    page {
        background: $page-color-base;
    }

    .list-cell {
        display: flex;
        align-items: baseline;
        padding: 20upx $page-row-spacing;
        line-height: 60upx;
        position: relative;
        background: #fff;
        justify-content: center;
        &.log-out-btn {
            margin-top: 40upx;
            .cell-tit {
                color: $uni-color-primary;
                text-align: center;
                margin-right: 0;
            }
        }
        &.cell-hover {
            background: #fafafa;
        }
        &.b-b:after {
            left: 30upx;
        }
        &.m-t {
            margin-top: 16upx;
        }
        .cell-more {
            align-self: baseline;
            font-size: $font-lg;
            color: $font-color-light;
            margin-left: 10upx;
        }
        .cell-tit {
            flex: 1;
            font-size: $font-base + 2upx;
            color: $font-color-dark;
            margin-right: 10upx;
        }
        .cell-tip {
            font-size: $font-base;
            color: $font-color-light;
        }
        switch {
            transform: translateX(16upx) scale(.84);
        }
    }
</style>
